<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tab选项卡</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: content-box;
			}
			ul {
				list-style: none;
			}
			a {
				color: #000;
				text-decoration: none;
				float: left;
			}
			#table {
				width: 500px;
				/* 居中 */
				margin: 0 auto;
				border: 1px solid #e0e0e0;
			}
			
			#header {
				height: 50px;
			}
			
			#header a {
				width: 20%;
				text-align: center;
				line-height: 50px;
			}
			
			.header a {
				background-color: #e0e0e0;
			}
			
			/* 预定义选中之后的样式 */
			.selected a {
				background-color: whitesmoke;
			}
			
			#content {
				width: 100%;
				height: 120px;
			}
			
			.dom {
				margin-top: 10px;
				margin-left: 10px;
			}
			
			.dom a {
				width: 50%;
				padding: 20px 0;
				text-align: center;
			}
		</style>
		<script src="../jQuery/jquery-3.7.1.js"></script>
	</head>
	<body>
		<div id="table">
			<!-- 头部 -->
			<div id="header">
				<ul class="header">
					<li>
						<a href="#">1</a>
					</li>
					<li>
						<a href="#">2</a>
					</li>
					<li>
						<a href="#">3</a>
					</li>
					<li>
						<a href="#">4</a>
					</li>
					<li>
						<a href="#">5</a>
					</li>
				</ul>
			</div>
			<!-- 内容 -->
			<div id="content">
				<div class="dom">
					<ul>
						<li><a href="#">我是第一个选项卡的内容1</a></li>
						<li><a href="#">我是第一个选项卡的内容2</a></li>
						<li><a href="#">我是第一个选项卡的内容3</a></li>
						<li><a href="#">我是第一个选项卡的内容4</a></li>
					</ul>
				</div>
				<div class="dom">
					<ul>
						<li><a href="#">我是第二个选项卡的内容1</a></li>
						<li><a href="#">我是第二个选项卡的内容2</a></li>
						<li><a href="#">我是第二个选项卡的内容3</a></li>
						<li><a href="#">我是第二个选项卡的内容4</a></li>
					</ul>
				</div>
				<div class="dom">
					<ul>
						<li><a href="#">我是第三个选项卡的内容1</a></li>
						<li><a href="#">我是第三个选项卡的内容2</a></li>
						<li><a href="#">我是第三个选项卡的内容3</a></li>
						<li><a href="#">我是第三个选项卡的内容4</a></li>
					</ul>
				</div>
				<div class="dom">
					<ul>
						<li><a href="#">我是第四个选项卡的内容1</a></li>
						<li><a href="#">我是第四个选项卡的内容2</a></li>
						<li><a href="#">我是第四个选项卡的内容3</a></li>
						<li><a href="#">我是第四个选项卡的内容4</a></li>
					</ul>
				</div>
				<div class="dom">
					<ul>
						<li><a href="#">我是第五个选项卡的内容1</a></li>
						<li><a href="#">我是第五个选项卡的内容2</a></li>
						<li><a href="#">我是第五个选项卡的内容3</a></li>
						<li><a href="#">我是第五个选项卡的内容4</a></li>
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script>
		// 隐藏所有的内容块，显示第一个内容块
		/* $('.dom').css('display', 'none')
				 .eq(0).css('display', 'block') */
		$('.dom').hide().eq(0).show()
		// 把第一个按钮区域背景变浅
		$('#header li').removeClass('selected')
					   .eq(0).addClass('selected')
		// 第二个按钮点了之后：
		// 1.把第二个按钮区域背景变浅，把其他按钮区域背景变深
		// 2.显示第二块内容，把其他内容块隐藏
		// $('#header li>a').eq(1).click(function() {
		// 	$('.dom').hide().eq(1).show()
		// 	$('#header li').removeClass('selected')
		// 	               .eq(1).addClass('selected')
		// })
		for(let i = 0; i < $('#header li>a').length; i ++) {
			$('#header li>a').eq(i).click(function() {
				$('.dom').hide().eq(i).show()
				$('#header li').removeClass('selected')
				               .eq(i).addClass('selected')
			})
		}
	</script>
</html>